import { useStore } from '@/hooks';
import { Box, Icon, List, Search, Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import moment from 'moment';
import React from 'react';
import { pointKindText } from '../stores/TaskMapStore';
import styles from './VehiclePanel.module.scss';

const VechilePanel = observer(({ ...props }) => {
  const { taskMapStore: store } = useStore();

  return (
    <Box className={styles.vehiclePanel} {...props}>
      <Search shape="simple" type="normal" hasClear placeholder={t`查找车辆`} style={{ width: '100%' }} value={store.pointKeyword} onChange={(v) => { store.pointKeyword = v; }} />
      <Tab size="small" navClassName="tab-nav" activeKey={store.pointKind} onChange={(key) => { store.pointKind = Number(key); }}>
        {[1, 2, 0].map((key) => (
          <Tab.Item title={`${pointKindText[key]}(${store.getLocations(key).length})`} key={key} />
        ))}
      </Tab>
      <VehicleList />
    </Box>
  );
});

export default VechilePanel;

const VehicleList = observer(() => {
  const { taskMapStore: store } = useStore();

  return (
    <Box className="list-content">
      <List size="small" style={{ flex: 'auto' }}>
        {store.getLocations().map((v) => (
          <List.Item
            key={v.id}
            style={{ cursor: 'pointer' }}
            media={<Icon className="iconfont icon-cheliang" size={18} />}
            extra={moment(v.upDate).fromNow()}
            // extra={store.traceKind === 0 && store.trace?.id == v.id && <Icon type="arrow-right" size="xs" />}
            title={`${v.metadata?.vehicleNo}`}
            description={`${v.metadata?.driverName || ''} ${v.metadata?.taskId || ''}`}
            onClick={() => { store.selectedPoint = v; }}
          />
        ))}
      </List>
    </Box>
  );
});


